 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml"
       xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>发布页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/editor/css/editormd.css" />
    <link rel="stylesheet" href="/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/css/bootstrap-theme.min.css"/>
    <link rel="stylesheet" href="/css/community.css"/>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="/js/bootstrap.min.js" type="application/javascript"></script>
    <script src="/editor/editormd.min.js"></script>
</head>
<body>
<div class="row" id="app">
    <div class="panel panel-default col-xs-12 col-sm-12 col-md-12 panel panel-default">
        <div class="panel-body">
            <form action="/publishQuestion" method="post">
                <div class="form-group">
                    <label for="title">问题标题（简单扼要）:</label>
                    <input type="text" class="form-control" id="title" name="qTitle"
                           placeholder="问题标题" autocomplete="off">
                </div>
<!--                警告框-->
                <div class="alert alert-danger alert-dismissible" role="alert" th:if="${msgError!=null}">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <strong>Warning!</strong><span th:text="${msgError}"></span>
                </div>
<!--                文本区域-->
                <div id="editor">
                    <textarea style="display:none;" name="qDesc"></textarea>
                </div>
                <script type="text/javascript">
                    $(function() {
                        var editor = editormd("editor", {
                            width: "100%",
                            height: 350,
                            path: "/js/lib/",
                            delay: 0,
                            watch: false,
                            placeholder: "请输入问题描述",
                            imageUpload: true,
                            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                            imageUploadURL: "/markdownImgUpload",
                            saveHTMLToTextarea : true,
                            toolbarIcons : function () {
                                return ["bold","italic","list-ul","list-ol","image","preview","watch","clear","search",
                                    "h1", "h2", "h3", "h4", "h5", "h6"]
                            }
                        });
                    });
                </script>
<!--                标签-->
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="input-group">
                      <span class="input-group-btn">
                        <button type="button" class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg">选择标签</button>
                      </span>
                        <input type="text" class="form-control" placeholder="在这里输入你的问题标签" v-model="questionTags" name="qTags">
                    </div>
                </div>

                <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                            </div>
                            <span v-on:click="bindValue(item)" v-for="item in tags" class="glyphicon glyphicon-tag" style="margin: 10px 10px;">
                                {{item}}
                            </span>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
<!--                提交-->
                <br><br><button type="submit" class="btn btn-success btn-publish ">发布</button>
            </form>
        </div>
    </div>
</div>
<div th:insert="nav::base"></div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            tags:["吹水","吹牛批","水贴","java","springboot","框架"],
            questionTags:[],
            test:'测试'
        },
        methods:{
            bindValue:function (item) {
                this.questionTags.push(item)
            }
        }
    })
</script>
</body>
</html>